<template>
  <vant-form ref="form" :validate-first="true" class="page-p-l page-p-r" input-align="right">
    <vant-field
      label="轴距"
      v-model="form.wheelbases"
      placeholder="1 - 2 - 3 - 4"
      input-align="right"
      :rules="[{ required:true }]"
    >
      <span slot="extra">米</span>
    </vant-field>

    <vant-field
      label="轴荷"
      left-icon="photo-o"
      v-model="form.axleLoad"
      placeholder="10 + 10 +10 + 20"
      input-align="right"
      :rules="[{ required:true }]"
      @click-left-icon="clickLeftIcon"
    >
      <span slot="extra">吨</span>
    </vant-field>

    <app-input-number
      label="总体外廓长度"
      v-model="form.totalLength"
      placeholder="请输入"
      input-align="right"
      :rules="[{ required:true }]"
    >
      <span slot="extra">米</span>
    </app-input-number>
    <app-input-number
      label="总体外廓宽度"
      v-model="form.totalWidth"
      placeholder="请输入"
      input-align="right"
      :rules="[{ required:true }]"
    >
      <span slot="extra">米</span>
    </app-input-number>
    <app-input-number
      label="总体外廓高度"
      v-model="form.totalHeight"
      placeholder="请输入"
      input-align="right"
      :rules="[{ required:true }]"
    >
      <span slot="extra">米</span>
    </app-input-number>

    <app-input-number
      label="车货总质量"
      v-model="form.totalWeight"
      placeholder="请输入"
      input-align="right"
      :rules="[{ required:true }]"
    >
      <span slot="extra">吨</span>
    </app-input-number>
    <div></div>
  </vant-form>
</template>

<script>
import { Vant } from '@components/Vant/index'
import { saveGovOverAll} from '@apis/apply'
import mixin from './mixin'
export default {
  name: 'ApplyOverAll',
  mixins: [mixin],
  data() {
    return {
      form: this.curForm,
    }
  },
  created(){
    this.setFormVal();
    this.saveGovOverAll();
  },
  methods: {
    setFormVal(data = {}) {
      ['wheelbases', 'axleLoad', 'totalLength', 'totalWidth', 'totalHeight','totalWeight'].forEach(key => {
        this.$set(this.form, key, data[key] ? data[key] : '')
      });
    },
    saveGovOverAll(){
      saveGovOverAll().then(res => {
        const { data = {} } = res || {};
        this.setFormVal(data);
      })
    },
    submit() {
      return Promise.resolve(this.form);
    },
    clickLeftIcon() {
      const { ImagePreview } = Vant
      const url = require('@assets/apply/axleLoad.png')
      ImagePreview([url]);
    }
  }
}
</script>

<style lang="less" scoped>
</style>